<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>送给清清小宝贝</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #fff; /* White background for initial state */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            position: relative;
        }

        .container {
            position: relative;
            width: 600px; /* Container width doubled */
            height: 400px; /* Container height doubled */
            background-color: white; /* Background to visualize the container */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            z-index: 5; /* Ensure container is above SVG */
            border: 1px solid black; /* Add border to container */
            box-sizing: border-box;
        }

        .heart {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg) translateY(50px) translateX(-50px); /* Rotate, move down and left by half of new height/width */
            width: 100px; /* Heart width doubled */
            height: 100px; /* Heart height doubled */
            background-color: red; /* The heart */
            z-index: 10; /* Ensure heart is above container */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 100px; /* Doubled */
            height: 100px; /* Doubled */
            background-color: red;
            border-radius: 50%; /* Make them circles */
        }

        .heart::before {
            top: -50px; /* Doubled */
            left: 0;
        }

        .heart::after {
            left: 50px; /* Doubled */
            top: 0;
        }

        /* SVG for lines */
        svg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allow interaction with elements below SVG */
            z-index: 1; /* Ensure SVG is below container */
        }

        .gift-text {
            text-align: center;
            margin-top: 40px; /* Doubled */
            font-size: 3em; /* Font size doubled (from 1.5em) */
            color: #e91e63; /* Romantic pink color */
            font-family: ' cursive'; /* Romantic font style, fallback to cursive */
            z-index: 11; /* Ensure text is above heart and container */
            position: relative; /* Needed for z-index to work relative to container */
        }

        /* CSS for Canvas */
        #countdown-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2; /* Below container and heart, above SVG */
            pointer-events: none; /* Allow interaction with elements below canvas */
        }

        /* New style for fireworks text */
        .fireworks-text {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Center the text */
            font-size: 8em; /* Larger font size */
            color: #ff4081; /* Solid color for text */
            font-family: ' cursive'; /* Romantic font style */
            z-index: 15; /* Ensure it's above everything */
            display: none; /* Initially hidden */
            text-align: center;
        }

        /* Style for the important text */
        .important-text {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Center the text */
            font-size: 8em; /* Match fireworks text size */
            color: #ff4081; /* Match fireworks text color */
            font-family: ' cursive'; /* Match romantic font style */
            z-index: 15; /* Ensure it's above everything */
            display: none; /* Initially hidden */
            text-align: center;
            white-space: nowrap; /* Ensure text stays on one line */
        }

        /* iframe for My_love.html */
        iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none; /* Remove default border */
            z-index: 4; /* Below text (15), above canvas (2) */
            display: none; /* Initially hidden */
        }

    </style>
</head>
<body>
    <div class="container" id="envelope-container">
        <div class="heart"></div>
        <div class="gift-text">
            送给小宝贝的礼物
        </div>
    </div>

    <svg>
        <line id="line-top-left" stroke="black" stroke-width="2"></line>
        <line id="line-top-right" stroke="black" stroke-width="2"></line>
        <line id="line-bottom-left" stroke="black" stroke-width="2"></line>
        <line id="line-bottom-right" stroke="black" stroke-width="2"></line>
    </svg>

    <canvas id="countdown-canvas"></canvas>

    <div class="fireworks-text">
        小宝贝看烟花
    </div>

    <div class="important-text">
        来咯！！！
    </div>

    <audio id="bgm" src="./I Hate Falling in Love - 史蒂文·黄.mp3" preload="auto"></audio>

    <iframe id="my-love-iframe" src="" frameborder="0"></iframe>

    <script>
        function updateLines() {
            const container = document.getElementById('envelope-container');
            const containerRect = container.getBoundingClientRect();

            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;

            // Container corner coordinates relative to the viewport
            const containerTopLeftX = containerRect.left;
            const containerTopLeftY = containerRect.top;
            const containerTopRightX = containerRect.right;
            const containerTopRightY = containerRect.top;
            const containerBottomLeftX = containerRect.left;
            const containerBottomLeftY = containerRect.bottom;
            const containerBottomRightX = containerRect.right;
            const containerBottomRightY = containerRect.bottom;

            // Screen corner coordinates
            const screenTopLeftX = 0;
            const screenTopLeftY = 0;
            const screenTopRightX = screenWidth;
            const screenTopRightY = 0;
            const screenBottomLeftX = 0;
            const screenBottomLeftY = screenHeight;
            const screenBottomRightX = screenWidth;
            const screenBottomRightY = screenHeight;

            // Update line coordinates
            const lineTopLeft = document.getElementById('line-top-left');
            lineTopLeft.setAttribute('x1', screenTopLeftX);
            lineTopLeft.setAttribute('y1', screenTopLeftY);
            lineTopLeft.setAttribute('x2', containerTopLeftX);
            lineTopLeft.setAttribute('y2', containerTopLeftY);

            const lineTopRight = document.getElementById('line-top-right');
            lineTopRight.setAttribute('x1', screenTopRightX);
            lineTopRight.setAttribute('y1', screenTopRightY);
            lineTopRight.setAttribute('x2', containerTopRightX);
            lineTopRight.setAttribute('y2', containerTopRightY);

            const lineBottomLeft = document.getElementById('line-bottom-left');
            lineBottomLeft.setAttribute('x1', screenBottomLeftX);
            lineBottomLeft.setAttribute('y1', screenBottomLeftY);
            lineBottomLeft.setAttribute('x2', containerBottomLeftX);
            lineBottomLeft.setAttribute('y2', containerBottomLeftY);

            const lineBottomRight = document.getElementById('line-bottom-right');
            lineBottomRight.setAttribute('x1', screenBottomRightX);
            lineBottomRight.setAttribute('y1', screenBottomRightY);
            lineBottomRight.setAttribute('x2', containerBottomRightX);
            lineBottomRight.setAttribute('y2', containerBottomRightY);
        }

        // Update lines initially and on window resize
        window.addEventListener('load', updateLines);
        window.addEventListener('resize', updateLines);

        // --- Start of Countdown Script --- //
        const canvas = document.getElementById('countdown-canvas');
        const ctx = canvas.getContext('2d');
        let countdown = null; // Variable to hold the countdown instance

        // Set canvas size
        function setCountdownCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        // Animation loop
        function animateCountdown() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (countdown) {
                countdown.update();
                countdown.draw(ctx);
                if (!countdown.isActive) {
                     // Countdown finished
                     countdown = null; // Reset after countdown finishes
                     ctx.clearRect(0, 0, canvas.width, canvas.height);

                     // Show fireworks text
                     const fireworksTextElement = document.querySelector('.fireworks-text');
                     if (fireworksTextElement) {
                         fireworksTextElement.style.display = 'block';
                         // Hide after 1 second and start fireworks
                         setTimeout(() => {
                             fireworksTextElement.style.display = 'none';
                             startFireworksEffect(); // Start fireworks after text hides
                         }, 1000);
                     }

                     // No return here to allow animation to continue to next phase if any
                }
            }
            requestAnimationFrame(animateCountdown);
        }

        // Countdown class from 倒数.html (simplified and adapted)
        class Countdown {
            constructor() {
                this.number = 3;
                this.isActive = true;
                this.state = 'forming'; // forming, showing, exploding, toNextNumber
                this.startTime = Date.now();
                this.particleCount = 2400; // 粒子数量增加一倍
                this.particles = [];
                this.createNumberParticles(this.number);
            }

            createNumberParticles(num) {
                const centerX = canvas.width / 2;
                const centerY = canvas.height / 2;
                const offCanvas = document.createElement('canvas');
                offCanvas.width = canvas.width;
                offCanvas.height = canvas.height;
                const offCtx = offCanvas.getContext('2d');
                offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);

                if (num > 0) {
                   offCtx.font = 'bold 400px Arial';
                   offCtx.textAlign = 'center';
                   offCtx.textBaseline = 'middle';
                   offCtx.fillStyle = '#fff';
                   offCtx.fillText(num, centerX, centerY);

                  const imageData = offCtx.getImageData(0, 0, offCanvas.width, offCanvas.height);
                  const points = [];
                  const step = 3; // 粒子间距更密集
                  for (let y = 0; y < offCanvas.height; y += step) {
                    for (let x = 0; x < offCanvas.width; x += step) {
                      const idx = (y * offCanvas.width + x) * 4;
                      if (imageData.data[idx + 3] > 128) {
                        points.push({x, y});
                      }
                    }
                  }

                  let targets = [];
                  for (let i = 0; i < this.particleCount; i++) {
                    const pt = points[Math.floor(Math.random() * points.length)];
                    targets.push(pt);
                  }

                  if (this.particles.length === 0) {
                    for (let i = 0; i < this.particleCount; i++) {
                      const startX = centerX + (Math.random() - 0.5) * canvas.width;
                      const startY = centerY + (Math.random() - 0.5) * canvas.height;
                      this.particles.push({
                        x: startX,
                        y: startY,
                        targetX: targets[i].x,
                        targetY: targets[i].y,
                        vx: 0,
                        vy: 0,
                        alpha: 1,
                        size: 1.5 + Math.random() * 1,
                        color: '#ffffff',
                        state: 'toNumber'
                      });
                    }
                  } else {
                    const currentParticleCount = this.particles.length;
                    const targetPointCount = targets.length;

                    if (currentParticleCount !== targetPointCount) {
                        console.warn('粒子数量与目标点数量不匹配，可能会导致显示异常。');
                    }

                    for (let i = 0; i < this.particles.length; i++) {
                        const targetIndex = i % targetPointCount;
                        this.particles[i].targetX = targets[targetIndex].x;
                        this.particles[i].targetY = targets[targetIndex].y;
                        this.particles[i].state = 'toNumber';
                    }
                  }
                } else { // num <= 0, used for forming the heart
                    const heartScale = 12.5 * 2; // Doubled heart size to match the expanded container
                    const points = [];
                    const heartCenterX = canvas.width / 2;
                    const heartCenterY = canvas.height / 2;

                    for (let i = 0; i < this.particleCount; i++) {
                        let x, y;
                        do {
                            const t = Math.random() * 2 * Math.PI;
                            const r = Math.random();
                            const outlineX = heartScale * 16 * Math.pow(Math.sin(t), 3);
                            const outlineY = -heartScale * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
                            x = heartCenterX + outlineX * r;
                            y = heartCenterY + outlineY * r;
                        } while (Math.sqrt( (x - heartCenterX)*(x - heartCenterX) + (y - heartCenterY)*(y - heartCenterY) ) > heartScale * 20 && points.length < this.particleCount * 2);
                        points.push({x, y});
                    }

                    for (let i = 0; i < this.particles.length; i++) {
                         const pointIndex = i % points.length;
                         this.particles[i].targetX = points[pointIndex].x;
                         this.particles[i].targetY = points[pointIndex].y;
                         this.particles[i].state = 'toNumber';
                         this.particles[i].color = '#FF69B4'; // 修改为粉色
                    }

                    if (this.particles.length > points.length) {
                         this.particles.splice(points.length);
                    }
                }
            }

            update() {
                const currentTime = Date.now();
                const elapsedTime = currentTime - this.startTime;

                if (this.state === 'forming') {
                    let allArrived = true;
                    this.particles.forEach(p => {
                        const dx = p.targetX - p.x;
                        const dy = p.targetY - p.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        if (distance > 1) {
                            allArrived = false;
                            p.x += dx * 0.05 + (Math.random() - 0.5) * 0.8;
                            p.y += dy * 0.05 + (Math.random() - 0.5) * 0.8;
                        }
                    });
                    if (allArrived) {
                        this.state = 'showing';
                        this.startTime = currentTime;
                        if (this.number <= 0) { // If formed heart, set a longer show duration
                           this.showDuration = 5000; // Show heart for 5 seconds
                        } else {
                           this.showDuration = (this.number === 1) ? 1000 : 2000;
                        }
                    }
                } else if (this.state === 'showing') {
                    if (elapsedTime >= this.showDuration) {
                        if (this.number <= 0) { // After showing heart, finish
                            this.isActive = false;
                        } else {
                            this.state = 'exploding';
                            this.startTime = Date.now();
                             if (this.number === 1) {
                                 this.number--; // Change number to 0 for heart formation
                                 this.createNumberParticles(this.number);
                                 this.state = 'forming'; // Immediately transition to forming the heart
                                 this.startTime = Date.now();
                             } else {
                                 this.particles.forEach(p => {
                                    const angle = Math.random() * Math.PI * 2;
                                    const speed = (1.2 + Math.random() * 1.2) * 0.4;
                                    p.vx = Math.cos(angle) * speed;
                                    p.vy = Math.sin(angle) * speed;
                                 });
                             }
                        }
                    }
                } else if (this.state === 'exploding') {
                    let transition = false;
                    this.particles.forEach(p => {
                        p.x += p.vx;
                        p.y += p.vy;
                    });
                    if (elapsedTime >= 2000) { // Explode for 2 seconds
                       transition = true;
                    }

                    if(transition) {
                         // Transition to showing the next number or forming heart
                         this.number--;
                         if (this.number >= 0) {
                              this.createNumberParticles(this.number);
                              this.state = 'forming'; // Transition to forming next number/heart
                              this.startTime = Date.now();
                         } else {
                            this.isActive = false; // Finish if no more numbers
                         }
                    }
                }
            }

            draw(ctx) {
                this.particles.forEach(p => {
                    ctx.fillStyle = p.color; // Using particle color
                    ctx.globalAlpha = p.alpha; // Using particle alpha
                    
                    if (this.number <= 0) { // 当形成爱心时，绘制小爱心
                        const size = p.size * 2; // 调整爱心大小
                        ctx.save();
                        ctx.translate(p.x, p.y);
                        ctx.rotate(-Math.PI / 4); // 旋转45度使爱心正立
                        
                        // 绘制爱心
                        ctx.beginPath();
                        ctx.moveTo(0, -size/2);
                        ctx.bezierCurveTo(
                            size/2, -size,
                            size, 0,
                            0, size
                        );
                        ctx.bezierCurveTo(
                            -size, 0,
                            -size/2, -size,
                            0, -size/2
                        );
                        ctx.fill();
                        
                        ctx.restore();
                    } else { // 其他数字保持圆形粒子
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                        ctx.fill();
                    }
                });
                ctx.globalAlpha = 1; // Reset alpha
            }
        }

        // --- Start of Fireworks Script from My_love.html --- //
        // Fireworks colors
        const colors = [
          '#FFF8DC', '#FFF5E6', '#FFF0DB', '#FFEBCD', '#FFE4C4', '#FFDAB9', '#FFD4B8', '#FFD1B3',
          '#FFD700', '#FFD100', '#FFCC00', '#FFC800', '#FFC400', '#FFC000', '#FFBC00', '#FFB800',
          '#FFB400', '#FFB000', '#FFAC00', '#FFA800', '#FFA400', '#FFA000', '#FF9C00', '#FF9800',
          '#FF9400', '#FF9000'
        ];

        // Fireworks class
        class Firework {
          constructor(x, y, targetX, targetY) {
            this.x = x;
            this.y = y;
            this.targetX = targetX;
            this.targetY = targetY;
            this.speed = 15;
            this.angle = Math.atan2(targetY - y, targetX - x);
            this.vx = Math.cos(this.angle) * this.speed;
            this.vy = Math.sin(this.angle) * this.speed;
            this.particles = [];
            this.exploded = false;
            this.color = colors[Math.floor(Math.random() * colors.length)];
            this.trail = [];
            this.trailLength = 20;
            this.spiralAngle = 0;
            this.spiralRadius = 0;
            this.spiralSpeed = 0.1;
            this.spiralGrowth = 0.5;
          }

          update() {
            if (!this.exploded) {
              this.trail.push({
                x: this.x,
                y: this.y,
                alpha: 1,
                size: 2
              });
              if (this.trail.length > this.trailLength) {
                this.trail.shift();
              }
              this.trail.forEach(p => {
                p.alpha *= 0.85;
                p.size *= 0.95;
              });

              this.spiralAngle += this.spiralSpeed;
              this.spiralRadius += this.spiralGrowth;
              const spiralX = Math.cos(this.spiralAngle) * this.spiralRadius;
              const spiralY = Math.sin(this.spiralAngle) * this.spiralRadius;
              this.x += this.vx + spiralX * 0.1;
              this.y += this.vy + spiralY * 0.1;
              const dx = this.targetX - this.x;
              const dy = this.targetY - this.y;
              const distance = Math.sqrt(dx * dx + dy * dy);
              if (distance < 50 || this.y <= this.targetY) {
                this.explode();
              }
            } else {
              for (let i = this.particles.length - 1; i >= 0; i--) {
                const p = this.particles[i];
                p.trail.push({
                  x: p.x,
                  y: p.y,
                  alpha: 1,
                  size: p.size
                });
                if (p.trail.length > p.trailLength) {
                  p.trail.shift();
                }
                p.trail.forEach(t => {
                  t.alpha *= 0.85;
                  t.size *= 0.95;
                });

                p.x += p.vx;
                p.y += p.vy;
                p.vy += 0.05; // Gravity
                p.alpha -= 0.01;
                p.size *= 0.99;
                if (p.alpha <= 0) {
                  this.particles.splice(i, 1);
                }
              }
            }
          }

          explode() {
            this.exploded = true;
            this.trail = [];
            const particleCount = 150;
            const baseSpeed = 5;
            const baseSize = 3;
            for (let i = 0; i < particleCount; i++) {
              const angle = (Math.PI * 2 * i) / particleCount;
              const speed = baseSpeed + Math.random() * 3;
              const size = baseSize + Math.random() * 2;
              const particleColor = colors[Math.floor(Math.random() * colors.length)];
              this.particles.push({
                x: this.x,
                y: this.y,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                alpha: 1,
                color: particleColor,
                size: size,
                trail: [],
                trailLength: 20
              });
            }
          }

          draw(ctx) {
            if (!this.exploded) {
              this.trail.forEach((p, index) => {
                ctx.globalAlpha = p.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size * (index / this.trail.length), 0, Math.PI * 2);
                ctx.fill();
              });
              ctx.globalAlpha = 1;
              ctx.fillStyle = this.color;
              ctx.beginPath();
              ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
              ctx.fill();
            } else {
              this.particles.forEach(p => {
                p.trail.forEach((t, index) => {
                  ctx.globalAlpha = t.alpha * 0.5;
                  ctx.fillStyle = p.color;
                  ctx.beginPath();
                  ctx.arc(t.x, t.y, t.size * (index / p.trail.length), 0, Math.PI * 2);
                  ctx.fill();
                });
                const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 2);
                gradient.addColorStop(0, p.color);
                gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
                ctx.globalAlpha = p.alpha;
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size * 2, 0, Math.PI * 2);
                ctx.fill();
                ctx.globalAlpha = p.alpha;
                ctx.fillStyle = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                ctx.fill();
              });
            }
            ctx.globalAlpha = 1;
          }
        }

        // Fireworks array
        let fireworks = [];
        let fireworksAnimationId = null; // To store the animation frame ID

        // Create new firework
        function createFirework() {
          const startX = Math.random() * canvas.width;
          const startY = canvas.height;
          const targetX = canvas.width / 2 + (Math.random() - 0.5) * 200; // Randomize target X around center
          const targetY = canvas.height / 2 - Math.random() * 100; // Target Y in upper half
          fireworks.push(new Firework(startX, startY, targetX, targetY));
        }

        // Animation loop for fireworks
        function animateFireworks() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // Fading trail effect
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Randomly create new fireworks
            if (Math.random() < 0.04) { // Increased frequency for more fireworks
                createFirework();
            }

            // Update and draw all fireworks
            for (let i = fireworks.length - 1; i >= 0; i--) {
                fireworks[i].update();
                fireworks[i].draw(ctx); // Pass context
                if (fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                }
            }

            fireworksAnimationId = requestAnimationFrame(animateFireworks);
        }

        // Function to start the countdown effect
        function startCountdownEffect() {
             if (!countdown) { // Prevent multiple instances

                 // Hide the envelope elements
                 const container = document.getElementById('envelope-container');
                 if (container) {
                     container.style.display = 'none';
                 }
                 const svgElement = document.querySelector('svg');
                 if (svgElement) {
                     svgElement.style.display = 'none';
                 }

                 // Change background to black
                 document.body.style.backgroundColor = '#000';

                 setCountdownCanvasSize(); // Ensure canvas is sized correctly
                 countdown = new Countdown();
                 animateCountdown(); // Start the countdown animation loop
             }
        }

        // Function to start the fireworks effect
        function startFireworksEffect() {
            fireworks = []; // Clear any existing fireworks
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas from countdown
            // Keep background black handled by body style
            animateFireworks(); // Start the fireworks animation loop

            // Stop fireworks after 13.14 seconds and show important text
            setTimeout(() => {
                cancelAnimationFrame(fireworksAnimationId); // Stop the animation loop
                ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
                fireworks = []; // Clear fireworks array

                // Show important text
                const importantTextElement = document.querySelector('.important-text');
                if (importantTextElement) {
                    importantTextElement.style.display = 'block';
                    // 播放背景音乐
                    const bgm = document.getElementById('bgm');
                    if (bgm) {
                        bgm.play();
                    }
                    // Hide important text after 1 second and start My_love effect
                    setTimeout(() => {
                        importantTextElement.style.display = 'none';
                        startMyLoveEffect(); // Start My_love.html effect
                    }, 1000);
                }

            }, 13140); // 13.14 seconds for fireworks
        }

        // Function to start the My_love.html effect
        function startMyLoveEffect() {
            const myLoveIframe = document.getElementById('my-love-iframe');
            if (myLoveIframe) {
                myLoveIframe.src = './1.html'; // 修改为相对路径
                myLoveIframe.style.display = 'block'; // Show the iframe

                // Hide the iframe after 520 seconds
                setTimeout(() => {
                    myLoveIframe.style.display = 'none'; // Hide the iframe
                    myLoveIframe.src = ''; // Optional: Clear src to stop content
                    // Optionally revert background or show original elements here
                    // document.body.style.backgroundColor = '#fff'; // Revert background if needed
                }, 520000); // Duration for My_love.html effect (520 seconds)
            }
        }

        // Get the heart element and add click listener
        const heartElement = document.querySelector('.heart');
        if (heartElement) {
            heartElement.style.cursor = 'pointer'; // Indicate it's clickable
            console.log('Heart element found, adding click listener.'); // Log to confirm element is found
            heartElement.addEventListener('click', function() {
                console.log('Heart clicked!'); // Log on click
                startCountdownEffect();
            });
        } else {
             console.error('Heart element not found!'); // Log if element not found
        }

        // Ensure canvas size is set on initial load and resize
        window.addEventListener('load', setCountdownCanvasSize);
        window.addEventListener('resize', setCountdownCanvasSize);

        // --- End of Countdown Script --- //

    </script>
</body>
</html>
